<template>
  <div>
    <div id="backimg">

    </div>
    <!-- <div id="witeback">

    </div> -->
    <div id="loginbelow">

    </div>
    <div id="login">
      <div id="login_title">
        <img src="../../public/images/logo.png" alt="无限动力" 
        style="height: 25px;width: 25px;margin-bottom: -8px;margin-right: 5px;" >
        T.C.M 信息系统
      </div>
      <div style="border-bottom: 2px solid #5470b0;margin-top: 13px;">

      </div>
      <div style="margin-top: 30px;margin-left: -20px;width: 300px;">
        <el-form  label-position="right" label-width="100px" status-icon :rules="rules" ref="ruleForm"
         :model="ruleForm" style="max-width: 460px" >
          <el-form-item label="账号:" prop="username">
            <el-input v-model="ruleForm.username" />
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input v-model="ruleForm.password" type="password" />
          </el-form-item>
          <el-form-item label="确认密码:" prop="type">
            <el-input v-model="ruleForm.type" type="password" />
          </el-form-item>
          <el-from-item style="margin-left: 51px;">
            <el-button type="primary" @click="submitFrom(ruleForm)">注册</el-button>
            <el-button  @click="submitFrom1()">重置</el-button>
            <el-button style="text-decoration: underline;position: absolute;right: 15px;bottom:8px;" 
            type="primary" link @click="toregister()" round >返回登录</el-button>
            <!-- <el-button type="primary" @click="submitFrom2(ruleForm)">修改密码</el-button> -->
          </el-from-item>
        </el-form>
        <!-- <div>
          <span>技术支持:木木马一游</span>
          <span>联系人:木木马</span>
          <span>交流群:1123</span>
        </div> -->
      </div>
      <!-- <div>
        <span>版权所有</span>
        <span>Copin</span>
      </div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from 'vue'
export default {
  name: 'RegisterV',
  data() {
    const labelPosition = ref('left')

    const ruleForm = reactive({
      username: '',
      password: '',
      type: '',
    });
    var validateusername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'));
      }else{
        callback();
      }
    };
    var validatepassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }else{
        callback();
      }
    };
    var validatetype = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'));
      }else if(value!==ruleForm.password){
        callback(new Error('确认密码与密码不一致'));
      }
      else{
        callback();
      }
    };
    return {
      labelPosition,
      ruleForm,
      rules: {
        username: [
          { validator: validateusername, trigger: 'blur' }
        ],
        password: [
          { validator: validatepassword, trigger: 'blur' }
        ],
        type: [
        { validator: validatetype, trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
    toregister() {
      this.$router.push('/login')
    },
    submitFrom(formName) {
      if (formName.username == '' || formName.password == '') {
        this.$message({
          message: '账号和密码不能为空',
          type: 'danger'
        })
      }
      else if (formName.type == formName.password) {
        this.$http.post('/user/signup', {
          account: this.ruleForm.username,
          password: this.ruleForm.password,
        }, 
        // {  headers: {
        //     'content-type': 'application/json',
        //   }}
          ).then(res => {
          console.log(res.data);
          if (res.data.code == 1) {
            this.$message({
              message: '注册成功',
              type: 'success'
            })
            // this.$router.push('/login');
          }
          else {
            this.$message({
              message: '注册失败,账号已存在',
              type: 'danger'
            })
          }
        })
      }
      else {
        // console.log(formName.username)
        this.$message({
          message: '两次密码不匹配',
          type: 'warning'
        })
      }

    },
    submitFrom1(){
      if(this.$refs.ruleForm!==undefined)
      this.$refs.ruleForm.resetFields();
    },
    // submitFrom2(formName){
    //   if (formName.username == '' || formName.password == '') {
    //     this.$message({
    //       message: '账号和密码不能为空',
    //       type: 'danger'
    //     })
    //   }
    //   else if (formName.type == formName.password) {
    //     this.$http.post('/register1', {
    //       username: this.ruleForm.username,
    //       password: this.ruleForm.password,
    //       // username: formName.username,
    //       // password: formName.password,
    //     }, {
    //       headers: {
    //         'content-type': 'application/json',
    //       }
    //     }).then(res => {
    //       console.log(res.data);
    //       console.log(typeof res.data);
    //       if (res.data == 0) {
    //         this.$message({
    //           message: '注销成功',
    //           type: 'success'
    //         })
    //         this.$router.push('/login');
    //       }
    //       else {
    //         this.$message({
    //           message: '注销失败',
    //           type: 'danger'
    //         })
    //       }
    //     })
    //   }
    //   else {
    //     // console.log(formName.username)
    //     this.$message({
    //       message: '两次密码不匹配',
    //       type: 'warning'
    //     })
    //   }
    // },
    // submitFrom3(formName){
    //   if (formName.username == '' || formName.password == '') {
    //     this.$message({
    //       message: '账号和密码不能为空',
    //       type: 'danger'
    //     })
    //   }
    //   else  {
    //     this.$http.post('/register2', {
    //       username: this.ruleForm.username,
    //       password: this.ruleForm.password,
    //       newpassword: formName.type,
          
    //       // password: formName.password,
    //     }, {
    //       headers: {
    //         'content-type': 'application/json',
    //       }
    //     }).then(res => {
    //       console.log(res.data);
    //       console.log(typeof res.data);
    //       if (res.data == 0) {
    //         this.$message({
    //           message: '修改成功',
    //           type: 'success'
    //         })
    //         this.$router.push('/login');
    //       }
    //       else {
    //         this.$message({
    //           message: '修改失败',
    //           type: 'danger'
    //         })
    //       }
    //     })
    //   }
     
    // },
  }
}
</script>

<style scoped>
#backimg {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url("../../public/images/10001.jpg");
  /* background: #42b983; */
  position: absolute;
  top: 0px;
  left: 0px;
}

#witeback {
  width: 100%;
  height: 300px;
  background: #fff;
  position: absolute;
  top: 50%;
  margin-top: -200px;
  margin-left: -7px;
  opacity: 50%;

}

#loginbelow {
  height: 300px;
  width: 300px;
  background: #fff;
  position: absolute;
  top: 60%;
  margin-top: -300px;
  opacity: 85%;
  right: 40%;
  border-radius: 10px;
}

#login {
  height: 300px;
  width: 300px;
  /* background: #fff; */
  position: absolute;
  top: 60%;
  margin-top: -300px;
  right: 40%;
  border-radius: 10px;
}


#login_title {
  margin-top: 16px;
  margin-left: 10px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 18px;
  font-weight: bold;

}
</style>